<template>
  <div
    id="menus"
    :style="{
    borderColor:`${styles.colorLine}`,
    background:`${styles.colorBg}`
    }"
  >
    <div v-for="(v,i) in styles.imgUrl" :key="i" class="menus-content">
      <el-image v-if="v.front[0].img==''" style="width: 28px; height: 28px" :src="img" fit="cover"></el-image>
      <el-image v-else style="width: 28px; height: 28px" :src="v.front[0].img" fit="cover"></el-image>
      <p :style="{color:`${i==0?styles.colorSelect:styles.colorUnselect}`}" class="fontTxt">{{v.text}}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "menus",
  data() {
    return {
      img: require("../../../assets/img/blank.png"),
    };
  },
  computed: {
    ...mapState(["menu"]),
    styles() {
      return this.menu[0].styles;
    },
  },
  components: {},
};
</script>
<style lang="less" scoped>
@import url("../../../assets/css/base.less");
#menus {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background-color: #fff;
  border-top: 1px solid #eee;
}
  .fontTxt{
    font-size: 12px;
  }
</style>
